<template>
  <div>
     <div>
        firstName:<input type="text" v-model="firstName">
        middleName:<input type="text" v-model="middleName">
        lastName:<input type="text" v-model="lastName">
        fullName: <input type="text" v-model="fullName">
     </div>
  </div>
</template>
<!-- 
  计算属性在vue3中以函数形式存在computed
  整个computed的参数有两种情况
  1、函数（比较常见的写法）相当于与是调用了标准写法中配置对象的get方法
  2、配置对象:常见的有set方法(设置计算属性)和get方法（调用计算属性的）
  计算属性中不能完成副作用(不能做异步操作)
 -->
<script lang='ts' setup>
import {ref,computed} from 'vue'
let firstName=ref<string>("zhai")
let middleName=ref<string>("ji")
let lastName=ref<string>("zhe")
const fullName=computed({
  get(){
    return firstName.value+" "+middleName.value+" "+lastName.value
  },
  set(v : string) {
    const ary=v.split(" ")
    firstName.value=ary[0]
    middleName.value=ary[1]
    lastName.value=ary[2]
  }
})

</script>

<style lang='scss' scoped>
</style>